<template>
    <div class="wrapper">
        <div class="header">
            <el-select
                style="width: 400px"
                @change="globalOverview"
                v-model="form.page_url"
                filterable
                clearable
                placeholder="所有域名"
                class="custom-placeholder"
            >
                <el-option :value="null" class="option-style">所有域名</el-option>
                <el-option v-for="item in urlList" :key="item" :value="item" class="option-style">{{
                    item
                }}</el-option>
            </el-select>
            <span class="tip" > 访问量仅统计成功打开前台的 </span>
        </div>
        <div class="total">
            <el-card shadow="hover" class="box-card dark-background">
                <div class="box">
                    <div class="total-title">今日访问量</div>
                    <div class="total-num">
                        {{ today_count}}
                    </div>
                </div>
            </el-card>
            <el-card style="margin-left: 20px" shadow="hover" class="box-card dark-background">
                <div class="box">
                    <div class="total-title">总访问量</div>
                    <div class="total-num">
                        {{ total_count }}
                    </div>
                </div>
            </el-card>
        </div>

        <div ref="charts" class="charts"></div>
    </div>
</template>

<script>
import { distinctPageUrls, globalOverview } from "@/api/tool/dataSearch";
import * as echarts from "echarts";
import { parseTime } from "@/utils/index";
export default {
    data() {
        return {
            urlList: [],
            list: [],
            total_count: 0,
            today_count:0,
            form: {},
            detail: {},
        };
    },
    created() {
        this.distinctPageUrls();
        this.globalOverview();
    },
    methods: {
        parseTime,
        globalOverview() {
            globalOverview(this.form).then((result) => {
                console.log(result, "result");
                this.total_count = result.total_count;
                this.today_count = result.today_count;
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.charts);
                this.detail = result.visits_list;
                myChart.setOption({
                    title: {
                        text: `日访问统计图`,
                    },
                    tooltip: {},
                    xAxis: {
                        data: Object.keys(result.visits_list),
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "访问量",
                            type: "bar",
                            data: Object.entries(result.visits_list).map(
                                (i) => i[1],
                            ),
                          itemStyle: {
                            color: '#4e6ef2' // 设置柱形图颜色为灰色
                          }
                        },
                    ],
                });
            });
        },
        distinctPageUrls() {
            distinctPageUrls({}).then((result) => {
                this.urlList = result;
            });
        },
    },
};
</script>
<style scoped>
.custom-placeholder ::v-deep .el-input__inner::placeholder {
  color: #555;  /* 设置为黑色 */
  font-weight: bold; /* 如果需要设置为加粗，保留这一行 */
}
/* 定义单独的 option 样式 */
.option-style {
  color: #555; /* 深灰色字体 */
  font-weight: bold; /* 可选：加粗 */
  font-size: 14px; /* 可根据需要设置字体大小 */
}
</style>
<style lang="scss" scoped>
.wrapper {
    padding: 32px;
    .tip {
        font-size: 14px;
        font-weight: bold;
        color: #555;
        margin-left: 20px;
    }

    .total {
        display: flex;
    }
  .dark-background {
    background-color: #4e6ef2;  /* 深灰色背景 */
    color: #fff; /* 白色字体，以便在深色背景上清晰可见 */
  }

  .box-card {
        width: 50%;
        margin-top: 20px;
        .box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
    .total-num {
        font-size: 20px;
        font-weight: bold; /* 可选：加粗 */
        margin: 0 auto;
    }

  .total-title {
    font-size: 23px;
    font-weight: 500;
    margin: 0 auto;
  }

    .charts {
        width: 100%;
        height: 400px;
        margin-top: 20px;
    }
}
</style>